<template>
    <!-- 区块的生成  -->
    <el-col >
        <el-form  class="widget-table widget-view widget-view-drag"
                  :class="{
      active: selectWidget.key && selectWidget.key == element.key

    }"
                  @click.native.stop="handleSelectWidget(index)"
                  :label="element.name"
        >

            <div class="sub-header" ng-click="selectField(field)">

                <h4 class="ng-binding" style="margin:8px">{{element.name}}</h4>
            </div>



            <div class="widget-table-wrapper">
                <div class="widget-table-content">

                    <draggable
                            v-model="element.tableColumns"
                            v-bind="{group:{name: 'people', put: handlePut}, ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
                            :no-transition-on-drag="true"
                            @add="handleWidgetTableAdd($event, element)"
                            @change="handleWidgetTableChange"
                    >
                        <transition-group name="fade" tag="div" class="widget-table-col" style="96%">


                            <widget-block-item
                                    v-for="(item, index) in element.tableColumns" v-if="item.key"
                                    :key="item.key"
                                    :element="item"
                                    :select.sync="selectWidget"
                                    :index="index" :data="element.tableColumns"
                                    @select-change="handleSelectChange($event, item)"
                            >
                                <el-row></el-row>
                            </widget-block-item>
                        </transition-group>
                    </draggable>
                </div>
            </div>

            <div class="widget-view-action widget-col-action">
                <button  type = "button"  class="show-circle action-delete" @click.stop="handleWidgetDelete(index)" v-if="selectWidget.key == element.key">
                    <i class="iconfont icon-trash" ></i>
                </button>

            </div>

            <!--<div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
               <i class="iconfont icon-drag drag-widget"></i>
             </div>-->
        </el-form>
    </el-col>
</template>

<script>
    import Draggable from 'vuedraggable'
    import WidgetBlockItem from './DivBlockItem'

    export default {
        components: {
            Draggable,
            WidgetBlockItem
        },
        props: ['element', 'select', 'index', 'data'],
        data () {
            return {
                selectWidget: this.select,
                // columnsWidthStyle: '96%'
            }
        },
        mounted () {

            // this.calcTableColumnsWidth()
        },
        methods: {
            handleSelectWidget (index) {
                this.selectWidget = this.data.list[index]
            },
            handleWidgetDelete (index) {
                if (this.data.list.length == 1) {
                    this.$emit('select-change', -1)
                } else {
                    if (this.data.list.length - 1 == index) {
                        this.$emit('select-change', index - 1)
                    } else {
                        this.$emit('select-change', index)
                    }
                }

                this.data.list.splice(index, 1)
            },
            handleWidgetTableChange ($event) {

            },
            calcTableColumnsWidth () {
                // this.columnsWidth = (this.element.tableColumns.length+1)*200

                this.columnsWidthStyle = 'calc(200px)'

                let widthArray = []

                for (let i = 0; i < this.element.tableColumns.length; i++) {
                    if (!this.element.tableColumns[i].options.width || this.element.tableColumns[i].options.width=='100%') {
                        widthArray.push('200px')
                    } else {
                        widthArray.push(this.element.tableColumns[i].options.width)
                    }
                }

                this.columnsWidthStyle = `calc(200px + ${widthArray.join(' + ')})`
            },
            handlePut (a, b, c) {

                if (c.className.indexOf('widget-col') >=0 || c.className.indexOf('widget-table') >= 0 || c.className.indexOf('no-put') >= 0 || c.children[0].className.indexOf('no-put') >= 0) {
                    return false
                }
                return true
            },
            handleWidgetTableAdd ($event, table) {
                const newIndex = $event.newIndex
                const key = new Date().getTime() + ''
                this.$set(table.tableColumns, newIndex, {
                    ...table.tableColumns[newIndex],
                    options: {
                        ...table.tableColumns[newIndex].options,
                        remoteFunc: table.tableColumns[newIndex].options.remoteFunc || 'func_'+key,
                        width: '200px'
                    },
                    novalid: {
                        ...table.tableColumns[newIndex].novalid,
                    },
                    key,
                    model: table.tableColumns[newIndex].model ? table.tableColumns[newIndex].model : table.tableColumns[newIndex].type + '_' + key,
                    rules: table.tableColumns[newIndex].rules ? [...table.tableColumns[newIndex].rules] : []
                })

                if (Object.keys(table.tableColumns[newIndex].options).includes('options')) {
                    this.$set(table.tableColumns, newIndex, {
                        ...table.tableColumns[newIndex],
                        options: {
                            ...table.tableColumns[newIndex].options,
                            options: [...table.tableColumns[newIndex].options.options.map(item => ({
                                ...item
                            }))]
                        }
                    })
                }

                this.selectWidget = table.tableColumns[newIndex]
            },
            handleSelectChange (index, item) {
                setTimeout(() => {
                    index >=0 ? (this.selectWidget = this.element.tableColumns[index]) : (this.selectWidget = {})
                })
            }
        },
        watch: {
            select (val) {
                this.selectWidget = val
            },
            selectWidget: {
                deep: true,
                handler (val) {
                    this.$emit('update:select', val)
                }
            },
            element: {
                deep: true,
                handler (val) {

                    //  this.calcTableColumnsWidth()
                }
            }
        }
    }
</script>
<style>
    .el-input {
        /* width: 100%  !important; */
    }

    .el-textarea {
        /* width: 100%  !important; */
    }
</style>

